<style>
    #configureQualification-add {
        padding: 20px 25px 25px 0;
    }

    .layui-layer-page .layui-layer-content {
        overflow: visible !important;
    }
</style>
<div class="layui-fluid" id="configureQualification-add">
    <form class="layui-form" action="" lay-filter="configureQualification-add-form">
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <input type="text" hidden name="configureId" data-th-value="${configureId}">
                    <label class="layui-form-label website-form-item-require">课题分类：</label>
                    <div class="layui-col-md4">
                        <select id="typeId" class="layui-input" lay-verify="required" lay-ignore
                                style="width: 80%; height: 38px; border: 1px solid #e6e6e6;">
                            <option value="">请选择</option>
                        </select>
                    </div>
                    <input type="hidden" id="levelTypeValue" name="levelTypeCode">
                    <div class="layui-col-md4" id="isValue">
                        <select id="levelTypeCode" class="layui-input" lay-ignore
                                style="width: 80%; height: 38px; border: 1px solid #e6e6e6;">
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <label class="layui-form-label">申报方式：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="declarationMethodCode" value="0" title="个人">
                        <input type="radio" name="declarationMethodCode" value="1" title="课题组">
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label">职务：</label>
                    <div class="layui-input-block">
                        <select name="positionTypeCode">
                            <option value="">请选择</option>
                            <option
                                    th:each="item : ${positionTypeList}"
                                    th:value="${item.code}" th:text="${item.name}">
                            </option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <label class="layui-form-label">职称级别：</label>
                    <div class="layui-input-block">
                        <select name="titleTypeCode">
                            <option value="">请选择</option>
                            <option
                                    th:each="item : ${titleTypeList}"
                                    th:value="${item.code}" th:text="${item.name}">
                            </option>
                        </select>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label">学历：</label>
                    <div class="layui-input-block">
                        <select name="degreeTypeCode">
                            <option value="">请选择</option>
                            <option
                                    th:each="item : ${degreeTypeList}"
                                    th:value="${item.code}" th:text="${item.name}">
                            </option>
                        </select>
                    </div>
                </div>

            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <label class="layui-form-label">最大年龄：</label>
                    <div class="layui-input-block">
                        <input type="number" onkeyup="value=value.replace(/[^\d]/g,'')" name="maxAge" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label">最小年龄：</label>
                    <div class="layui-input-block">
                        <input type="number" onkeyup="value=value.replace(/[^\d]/g,'')" name="minAge" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div id="westDiv" class="layui-col-md6">
                    <label class="layui-form-label">人事关系所在地：</label>
                    <div class="layui-input-block">
                        <div id="personnelAreaTypeCode"
                             name="personnelAreaTypeCode"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <label class="layui-form-label">项目进度：</label>
                    <div class="layui-input-block">
                        <textarea name="projectSchedule" placeholder="请输入内容，最多输入100字" rows="5" maxlength="100"
                                  class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item website-hide">
            <button class="layui-btn" lay-submit="" lay-filter="configureQualification-add-form-submit"
                    id="submit"></button>
            <button type="reset" class="layui-btn" id="reset"></button>
        </div>
    </form>
</div>

<script data-th-inline="javascript">
    layui.use(['website', 'form', 'validate', 'eleTree', 'formSelects', 'xmSelect'], function () {
        var $ = layui.$,
            website = layui.website,
            layer = layui.layer,
            form = layui.form,
            $view = $('#configureQualification-add'),
            $westDiv = $('#westDiv'),
            xmSelect = layui.xmSelect,
            $reset = $view.find('#reset'),
            groups = [[${groups}]],
            areaTypeList = [[${areaTypeList}]],
            validate = layui.validate,
            formSelects = layui.formSelects;

        form.verify(validate);
        form.render();
        $("#isValue").hide();
        $("#westDiv").hide();

        let personnelAreaTypeCode = {
            el: '#personnelAreaTypeCode',
            data: areaTypeList,
        }
        xmSelect.render(personnelAreaTypeCode)

        form.on('submit(configureQualification-add-form-submit)', function (data) {
            var maxAge = data.field.maxAge;
            var minAge = data.field.minAge;
            data.field.personnelAreaTypeCode = data.field.select
            if (parseInt(minAge) > parseInt(maxAge)) {
                website.alert.error('最小年龄要小于最大年龄');
                return false;
            }
            website.post(ctx + 'configureQualification', data.field, function () {
                layer.closeAll();
                website.alert.success('新增成功');
                $('#website-configure').find('#query').click();
            });
            return false;
        });
        $.each(groups, function (k, v) {
            $("#typeId").append("<option value='" + v.type.code + "'>" + v.type.name + "</option>");
        });
        $reset.on('click', function () {
            $("#levelTypeCode").empty();
        });
        $("#typeId").change(function () {
            var tmp = $(this).val();
            if (tmp == '') {
                $("#isValue").hide();
            }
            $("#levelTypeCode").empty();
            $.each(groups, function (k, v) {
                if (v.type.code == tmp) {
                    if (v.course.length != 0) {
                        $("#isValue").show();
                        $.each(v.course, function (key, value) {
                            $("#levelTypeCode").append("<option value='" + value.code + "'>" + value.name + "</option>");
                        });
                    } else {
                        $("#isValue").hide();
                        $("#levelTypeCode").append("<option value=''>" + '无数据' + "</option>");
                    }
                }
            });
            var defulValue = $("#levelTypeCode").val();
            if (defulValue == '') {
                $("#levelTypeValue").val(tmp);
            } else {
                $("#levelTypeValue").val(defulValue);
            }
        });
        $("#levelTypeCode").change(function () {
            var tmp = $(this).val();
            $("#levelTypeValue").val(tmp);
            if (tmp === 'level_xbfcxm') {
                $("#westDiv").show();
            }
        });
    });
</script>